<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>面向对象-选项卡</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.div {
				display: none;
			}
			input{
				width: 80px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			.active{
				background: red;
				color: #fff;
			}
			.div{
				width: 300px;
				height: 300px;
				border: 2px solid red;
				text-align: center;
			}
			#box{
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<input class="active" type="button" value="按钮1">
			<input type="button" value="按钮2">
			<input type="button" value="按钮3">
		</div>
		<div class="div" style="display:block;">这是按钮1</div>
		<div class="div">这是按钮2</div>
		<div class="div">这是按钮3</div>
	</body>

</html>
<script type="text/javascript">
	window.onload = function() {
		var oTab = new TabSwitch("box");
	}
	var aBtn = null;
	var aDiv = null;

	function TabSwitch(id) {
		var box = document.getElementById(id);
		this.aBtn = box.getElementsByTagName('input'); 
		this.aDiv = document.getElementsByClassName('div');
		var _this = this;
		for(i = 0; i < this.aBtn.length; i++) {
			this.aBtn[i].index = i;
			this.aBtn[i].onclick = function() {
				_this.tab(this); 
			}
		}
	}
	TabSwitch.prototype.tab = function(aBtn) {
		for(i = 0; i < this.aBtn.length; i++) {
			this.aBtn[i].className = '';
			this.aDiv[i].style.display = 'none';
		}
		aBtn.className = 'active';
		this.aDiv[aBtn.index].style.display = 'block';
	}
</script>